import React, { Component } from 'react';
import './index.scss';
import DataBase from './widget/DataBase.jsx';
import Follow from './widget/Follow.jsx';
import MpUrl from '@/route/getparam';
import { getUserInfo, getFollowList, getEmployee } from '@/api/user';

export default class User extends Component{
	constructor (props) {
		super(props)
		this.state = {
			userInfo: '',
			tapList: [
				{ name: '数据分析', type: 1 },
				{ name: '跟进', type: 2 }
			],
			contentNumber: 0,
			data: {},
      timeType: 1,
      followList: [], // 跟进列表
			content: '' // 组件变量
		}
	}
	changeTimeType (timeType) {
		this.setState({
			timeType: timeType
		}, () => {
			this._getEmployee()
		})
	}
	changeContent (type) { // 改变组件
		if (type === 1 && this.state.followList.length === 0) {
			getFollowList({employee_id: 1}).then(res => {
				this.setState({
					contentNumber: type,
					followList: res.data,
					content: <Follow data={res.data} />
				})
			})
		} else {
			this.setState({
				contentNumber: type,
				content: !type ? <DataBase data={this.state.data} /> : <Follow data={this.state.followList} />
			})
		}
	}
	_getEmployee () {
		getEmployee({employee_id: this.state.employee_id, type: this.state.timeType}).then(res => {
			this.setState({
				data: res.data,
				content: <DataBase data={res.data} changeTime={value => this.changeTimeType(value)}/> 
			})
		})
	}
	componentDidMount () {
		let getUrl = new MpUrl()
		this.setState({
			employee_id: getUrl.get('employee_id')
		}, () => {
			getUserInfo({employee_id: this.state.employee_id}).then(res => {
				this.setState({
					userInfo: res.data
				})
			})
			getEmployee({employee_id: this.state.employee_id, type: this.state.timeType}).then(res => {
				this.setState({
					data: res.data,
					content: <DataBase data={res.data} changeTime={value => this.changeTimeType(value)}/> 
				})
			})
		})
	}
	render () {
		return (
			<div className="user-card--body">
				<div className="user-card--title">
					<div className="user-card--info">
						<div>
							<img src={this.state.userInfo.employee_img} alt='略略' />
							<div className="inline-block">{this.state.userInfo.employee_name}</div>
						</div>
						<div className="text-center">
							{this.state.userInfo.position_name}丨{this.state.userInfo.employee_position_name}丨{this.state.userInfo.telephone}
						</div>
					</div>
					<a href={`./employeeDetail?employee_id=${this.state.employee_id}`} className="user-card--name">
						<div>{this.state.userInfo.employee_name}的名片</div>
						<i className='glyphicon-right glyphicon'></i>
					</a>
				</div>
				<div className="switch-tap">
					<span onClick={this.changeContent.bind(this, 0)} className={!this.state.contentNumber ? 'active' : ''}>数据分析</span>
					<span onClick={this.changeContent.bind(this, 1)} className={!!this.state.contentNumber ? 'active' : ''}>跟进</span>
				</div>
				<div>
					{this.state.content}
				</div>
			</div>
		)
	}
}